<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目标段" prop="institutionCode">
        <el-select
          v-model="queryParams.institutionCode"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleBidChange"
        >
          <el-option-group
            v-for="group in projectBidOptions"
            :key="group.name"
            :label="group.name">
            <el-option
              v-for="item in group.bids"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="ganttClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
      <div ref="gantt" class="gantt-container"/>
    </div>

  </div>
</template>

<script>

  import {selectProjectBidBranch} from "@/api/project/bid";
  import gantt from 'dhtmlx-gantt';
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
  import { loadGanttData } from "@/api/plan/profile/schedule";

  export default {
    name: "PlanProfileScheduleChar",
    data() {
      return {
        // 标段下拉框
        projectBidOptions: [],
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          institutionCode: null,
        },
        //gantt高度
        ganttHeight: innerHeight - 200 + 'px',
        ganttLoading: false,
        // 甘特图数据
        tasks: {
          data: []
        },
      }
    },
    created() {
      this.initBidSelect();
    },
    mounted() {
      this.intiGantt1();
    },
    methods: {
      /** 初始化甘特图 */
      initGantt() {
        let $this = this;
        //本地化
        gantt.i18n.setLocale('cn');
        //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
        gantt.config.autosize = false;
        //只读模式：打开后不可以操作甘特图
        gantt.config.readonly = false;
        //是否显示左侧树表格
        gantt.config.show_grid = true;
        //表格列设置：我们在后台获取数据后，会解析到这个表格列中，这里面会含有很多隐藏列，
        // 作用是甘特图中不需要看隐藏列，但当我们获取甘特图的任务时，这些隐藏列会跟随任务方便使用
        gantt.config.columns = [
          {
            name: 'text',
            label: '清单编号',
            tree: true,
            width: '150'
          },
          {
            name: 'progress',
            label: '进度',
            width: '100'
          },
          {
            name: 'start_date',
            label: '开始日期',
            align: 'center',
            width: '120'
          },
          {
            name: 'duration',
            label: '持续时间',
            align: 'center',
            width: '120'
          }
        ];
        //自适应
        //gantt.config.fit_tasks = true;
        //表头高度
        gantt.config.scale_height = 50;
        //开启提示：鼠标悬浮在gantt行上显示
        gantt.plugins({
          tooltip: true
        });

        let monthScaleTemplate = function (date) {
          let dateToStr = gantt.date.date_to_str("%M");
          let endDate = gantt.date.add(date, 2, "month");
          return dateToStr(date);
        };

        gantt.config.scales = [
          {unit: "year", step: 1, format: "%Y"},
          {unit: "month", step: 1, format: monthScaleTemplate},
        ];
        // gantt.config.scales = [
        //   {unit: "year", step: 1, format: "%Y"},
        //   {unit: "month", step: 1, format: "%j"}
        // ];
        //禁用双击事件
        gantt.config.details_on_dblclick = false;
        //关闭所有错误提示信息：gantt有自己的异常消息，如果不关闭可能页面会弹出异常消息
        gantt.config.show_errors = false;
        //灯箱事件
        gantt.attachEvent('onBeforeLightbox', function (task_id) {
          //这里调用了自己的页面，没有打开默认灯箱
          $this.addTask(task_id);
        });
        //禁止拖动设置任务长度
        gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
          return false;
        });
        //禁止拖动任务
        gantt.config.drag_move = false;
        //禁止拖动任务进度
        gantt.config.drag_progress = false;
        //禁止拖放添加Link
        gantt.config.drag_links = false;

        //开启标记
        gantt.plugins({
          marker: true
        });

      },
      intiGantt1() {
        //日期格式化
        gantt.config.xml_date = "%Y-%m-%d";
        gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题
        gantt.config.scales = [
          {unit: "year", step: 1, format: "%Y"},
          {unit: "month", step: 1, format: "%M"}
        ];
        //左侧是否自适应
        gantt.config.autofit = true;
        //左侧宽
        gantt.config.grid_width = 200;
        //取消连线
        gantt.config.drag_links = false;
        //只读
        gantt.config.readonly = true;
        //右侧显示列名
        // gantt.config.date_scale = "%Y";
        //自动调整图表坐标轴区间用于适配task的长度
        gantt.config.fit_tasks = true;
        //弹窗宽
        gantt.config.wide_form = false;
        gantt.config.show_errors = false;
        gantt.init(this.$refs.gantt);
        //汉化
        gantt.locale = {
          date: {
            month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            month_short: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            day_short: ["日", "一", "二", "三", "四", "五", "六"]
          },
          labels: {
            dhx_cal_today_button: "今天",
            day_tab: "日",
            week_tab: "周",
            month_tab: "月",
            new_event: "新建日程",
            icon_save: "保存",
            icon_cancel: "关闭",
            icon_details: "详细",
            icon_edit: "编辑",
            icon_delete: "删除",
            confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
            confirm_deleting: "是否删除计划?",
            section_description: "任务内容:",
            section_time: "时间范围:",
            section_type: "类型",
            section_text: "任务名称:",
            section_color: "颜色:",

            /* grid columns */

            column_text: "项目节点名称",
            column_start_date: "开始时间",
            column_duration: "持续时间",
            column_add: "",

            /* link confirmation */

            link: "关联",
            confirm_link_deleting: "将被删除",
            link_start: " (开始)",
            link_end: " (结束)",

            type_task: "任务",
            type_project: "项目",
            type_milestone: "里程碑",

            minutes: "分钟",
            hours: "小时",
            days: "天",
            weeks: "周",
            months: "月",
            years: "年"
          }
        }
        //左侧显示列名
        gantt.config.columns = [
          {name: "text", label: "任务名称", tree: true, width: '*'},
        ];
        //禁用双击事件
        gantt.config.details_on_dblclick = false;
      },
      /** 初始化标段下拉框 */
      initBidSelect() {
        selectProjectBidBranch().then(response => {
          this.projectBidOptions = response.data;
          this.queryParams.institutionCode = this.projectBidOptions[0].bids[0].code;
          this.loadData();
        });
      },
      // 标段下拉框发生变化
      handleBidChange() {
        this.loadData();
      },
      // 加载数据
      loadData() {
        loadGanttData({ institutionCode: this.queryParams.institutionCode }).then(response => {
          gantt.clearAll();
          if (response.data.length > 0) {
            // 加载数据
            this.tasks.data = response.data;
            gantt.parse(this.tasks);
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  .gantt-container {
    height: 100%;
  }

  .ganttClass {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
  }
</style>
